import React from 'react';
import { Form, Modal, Slider } from 'antd';
import LimitedTextArea from '../../../components/LimitedTextArea';
import { FileFormItem } from './components';
import { updateTaskProgress } from '../../../services';
import { MODAL_DEFAULT_PARAM, MODAL_FORCE_PARAM } from '../config';
import styles from './index.less';

const ProgressActionModal = ({ form, taskId, taskRecord, visible, setVisible, onOk }) => {
    // console.log('ProgressActionModal -> taskRecord', taskRecord);
    const { getFieldDecorator, validateFields } = form;
    const [confirmLoading, setConfirmLoading] = React.useState(false);
    const [progress, setProgress] = React.useState(taskRecord ? taskRecord.taskProgress : 0);
    const handleOk = () => {
        validateFields((err, values) => {
            if (err) {
                return;
            }
            setConfirmLoading(true);
            const { nowProgress, operateContent, files = { uploadResourceFile: '' } } = values;
            const { uploadResourceFile = '' } = files;
            updateTaskProgress({
                taskId,
                taskProgress: nowProgress,
                operateContent,
                resourceRelation: uploadResourceFile ? [uploadResourceFile] : []
            })
                .then(res => {
                    const { code } = res;
                    if (code === 10000) {
                        if (onOk) onOk();
                        setVisible(false);
                    }
                })
                .finally(() => {
                    setConfirmLoading(false);
                });
        });
    };

    const handleSliderChange = value => {
        setProgress(value);
    };

    React.useEffect(() => {
        if (visible) {
            setProgress(taskRecord ? taskRecord.taskProgress : 0);
        }
    }, [visible]);

    return (
        <Modal
            {...MODAL_DEFAULT_PARAM}
            title="填写进度"
            width={640}
            visible={visible}
            confirmLoading={confirmLoading}
            onOk={handleOk}
            destroyOnClose
            wrapClassName={styles.miniMarginBottom}
            onCancel={() => setVisible(false)}
            {...MODAL_FORCE_PARAM}
        >
            <Form labelCol={{ span: 6 }} wrapperCol={{ span: 16 }} style={{ marginTop: 24 }}>
                <Form.Item label="当前进度">
                    <span
                        style={{
                            position: 'absolute',
                            display: 'block',
                            width: 50,
                            left: 320,
                            color: '#585858'
                        }}
                    >
                        {progress}%
                    </span>
                    {getFieldDecorator('nowProgress', {
                        initialValue: progress
                    })(<Slider onChange={handleSliderChange} style={{ width: 300 }} />)}
                </Form.Item>
                <Form.Item label="进度说明">
                    {getFieldDecorator('operateContent')(<LimitedTextArea placeholder="请输入进度说明" />)}
                </Form.Item>
                <FileFormItem form={form} />
            </Form>
        </Modal>
    );
};

export default Form.create()(ProgressActionModal);
